<template>
	<view class="c-box">
		<view class="waite-number">
			<view class="num-wrap">
				<view class="num-item" v-for="(item,index) in waiteNumList" :key="index">
					<p>{{item.title}}</p>
					<p>{{item.value}}</p>
				</view>
			</view>
		</view>
		<view class="button-group">
			<view class="btn-item" @click="operate(item.title)" v-for="(item,index) in btnGroupList" :key="index">
				<uni-icons custom-prefix="iconfont" :type="item.icon" size="18" color="#3251EC"></uni-icons>
				<span>{{item.title}}</span>
			</view>
		</view>
		<view class="product-list">
			<view class="product-item" v-for="(item,index) in materialList" :key="index">
				<uni-card>
					<template v-slot:title>
						<uni-list style="flex-direction: row;align-items: center;">
							<span class="list-info1">{{item.materialName}}</span>
							<uni-list-item title="库存" style="font-size: 14px;font-weight: bold;" /><span
								class="list-info2">{{item.count}}</span>
						</uni-list>
					</template>
					<view class="img-box">
						<fileUpload v-model:ossIds="item.imageVideo" :disabled="true" />
					</view>
				</uni-card>
			</view>
		</view>
	</view>
</template>

<script>
	import * as API from '@/common/api';
	export default {
		name: "pages-materialPackage-products",
		props: {
			type: String
		},
		data() {
			return {
				waiteNumList: [{
						title: '待入库',
						value: 10
					},
					{
						title: '待借出',
						value: 15
					},
					{
						title: '待退回',
						value: 20
					},
					{
						title: '待报损',
						value: 8
					},
				],
				btnGroupList: [{
						icon: 'icon-lingyong',
						title: '领用'
					},
					{
						icon: 'icon-ruku',
						title: '入库'
					},
					{
						icon: 'icon-zhuanjie',
						title: '转借'
					},
					{
						icon: 'icon-tuihui',
						title: '退回'
					},
					{
						icon: 'icon-baosun',
						title: '报损'
					}
				],
				materialList: [],
			};
		},
		methods: {
			operate(e) {
				uni.navigateTo({
					url: '/pages/materialPackage/operate?title=' + e + '&type=' + this.type
				})
			},
			async getStockCountSum() {
				const res = await API.getStockCountSum({
					params: {
						type: this.type
					}
				})
				this.waiteNumList[0].value = res.data.storageCount;
				this.waiteNumList[1].value = res.data.stockRecordCount;
				this.waiteNumList[2].value = res.data.returnedCount;
				this.waiteNumList[3].value = res.data.breakageCount;
				console.log("得到的数据", res);
			}
		},
		created() {

		}
	}
</script>

<style lang="less">
	.waite-number {
		width: 90%;
		margin-left: 5%;
		height: 80px;
		background: url('../../static/icons/top-bg.png');
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 8px;

		.num-wrap {
			width: 95%;
			height: 80%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #F2F7FA;
			border-radius: 6px;

			.num-item {
				width: 25%;
				text-align: center;

				& p:nth-of-type(1) {
					font-size: 14px;
					color: #757575;
					margin-bottom: 10%;
				}

				& p:nth-of-type(2) {
					font-size: 16px;
					color: #304EEB;
				}
			}
		}

	}

	.button-group {
		width: 90%;
		height: 42px;
		display: flex;
		margin-top: 10px;
		margin-left: 5%;

		.btn-item {
			height: 100%;
			width: 18%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 10px;
			background-color: #ffffff;
			border-radius: 8px;
			line-height: 41px;
			gap: 4px;

			span {
				font-size: 14px;
				font-weight: bold;
			}
		}

		& .btn-item:nth-child(5) {
			margin-right: 0px !important;
		}
	}

	.product-list {
		width: 90%;
		margin-left: 5%;

		.product-item {
			width: 100%;

			::v-deep .uni-card__content {
				padding: 0px;
			}

			.img-box {
				width: 100%;
				height: 70px;
				display: flex;
				margin-top: 5%;
				gap: 20px;

				image {
					width: 60px;
					height: 60px;
					border-radius: 8px;
				}
			}

			.list-info1 {
				font-size: 14px;
				font-weight: bold;
			}

			.list-info2 {
				color: #3250EB;
				font-size: 14px;
				font-weight: bold;
				margin: 2px 0px 0px -14px;
				z-index: 2;
			}
		}
	}

	/deep/ .uni-card {
		margin: 10px 0px !important;
	}
</style>